<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <style>
        .item {
            border: 1px solid orange;
            padding: 0 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <!-- 要挂载的节点 -->
    <div id="root"></div>
    <!-- 引入依赖 -->
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>
    <!-- 设置类型为text/babel 否则浏览器无法解析jsx -->
    <script type="text/babel">
        /* 列表渲染中高阶函数使用 */
        // 1.定义app组件
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    message: "学生列表",
                    students: [
                        {
                            id: "114",
                            name: "baki",
                            score: 99,
                        },
                        {
                            id: "115",
                            name: "孙悟空",
                            score: 123,
                        },
                        {
                            id: "116",
                            name: "猪八戒",
                            score: 79,
                        },
                        {
                            id: "117",
                            name: "沙和尚",
                            score: 188,
                        },
                        {
                            id: "118",
                            name: "唐僧",
                            score: 180,
                        }
                    ]
                }
            }

            render() {
                const { message, students } = this.state

                /* 显示分数100以上的学生 */
                const filterStudents = students.filter(item => item.score > 100)
                /* 只显示过滤后的前两条数据 */
                const sliceStudents = filterStudents.slice(0, 2)

                return (
                    <div className="list">
                        <h2>{message}</h2>
                        {
                            students.filter(item => item.score > 100).slice(0, 2).map(item => {
                                return (
                                    <div className="item">
                                        <h2>学号：{item.id}</h2>
                                        <h2>姓名：{item.name}</h2>
                                        <h2>分数：{item.score}</h2>
                                    </div>
                                )

                            })
                        }
                    </div>
                )
            }
        }
        // 2.创建root并且渲染App组件
        const root = ReactDOM.createRoot(document.querySelector("#root"))
        root.render(<App />)
    </script>
</body>

</html>